<div class="content">
  <div class="row large-collapse">
    <div class="small-12 columns title-heading">
      <h1 class="bold">{{astroboxName}} · Tasks</h1>
    </div>
  </div>

  <div class="row collapse empty-tasks-list hide">
    <div class="small-12 columns text-center">
      <i class="icon-inbox"></i>
      <h4 class="bold">No tasks</h4>
      <p>You can create some!</p>
    </div>
  </div>

  <div class="file-upload-view">
    <div class="row upload-buttons">
      <div class="small-12 large-5 medium-centered columns">
        <span class="file-upload-button button success radius expand" style="margin-bottom: 10px">
          <i class="icon-plus"></i> Upload New Task ( <span class="extensions">.zip</span> )
          <input class="file-upload" type="file" name="file" accept="">
        </span>
      </div>
    </div>
    <div class="row upload-progress" style="display:none">
      <div class="small-12 large-10 large-centered columns">
        <div class="progress radius">
          <div class="meter" style="width: 0%"></div>
        </div>
        <div class="progress-message" align="center">
          <i class="icon-rocket-spinner animate-spin"></i> <span></span>
        </div>
      </div>
    </div>
  </div>

  <div class="task-list-container">
    <div class="row collapse">
      <div class="small-12 columns text-center supplies-heading">
        <h3 class="bold">Choose a Task</h3>
        <p>Here you'll find tasks such as Filament loading and unloading, auto leveling...</p>
      </div>
    </div>

    <ul id="task-list" class="row task-list-view small-block-grid-1"></ul>
  </div>

  <script type="text/template" id="task-row-template">
    <a class="launch" href="#additional-tasks/<%= additionalTaskApp.id %>">
      <div class="app-image">
        <img src="/static/img/variant/<%= additionalTaskApp.id %>/<%= additionalTaskApp.icon_filename %>" alt="<%= additionalTaskApp.strings.en.name %> icon"/>
        <div class="overlay">
          <h4 class="remove"><i class="icon-trash"></i></h4>
        </div>
      </div>
      <h1 class="name bold"><%= additionalTaskApp.strings.en.name %></h1>
    </a>
  </script>

  <div class="no-connection-overlay">
    <i class="icon-usb"></i>
    <b>Please, connect a 3D Printer via USB.</b>
  </div>

  <div id="delete-task-modal" class="reveal-modal medium radius" data-reveal>
    <h2 class="bold">Delete Task</h2>
    <div class="modal-body">
      <p>
        This will permanently delete the task: <b class="name"></b>.
      </p>
      <p>
        Are you sure you want to delete <b class="name"></b>?
      </p>
    </div>
    <div class="modal-actions row">
      <div class="small-12 medium-6 columns">
        <button class="secondary radius expand">No</button>
      </div>
      <div class="small-12 medium-6 columns">
        <div class="loading-button expand">
          <button class="alert radius">Yes, Delete</button>
          <span class="button disabled alert radius loading"><i class="icon-rocket-spinner animate-spin"></i> Deleting...</span>
          <span class="button disabled alert radius failed"><i class="icon-attention"></i> Failed</span>
        </div>
      </div>
    </div>
    <a class="close-reveal-modal">&#215;</a>
  </div>
</div>
